import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import JavaScriptPage from '../pages/JavaScript.vue'
import TypeScriptPage from '../pages/TypeScript.vue'
import ReactPage from '../pages/React.vue'
import NodePage from '../pages/Node.vue'
import GamePage from '../pages/Game.vue'
import FrontendEngineeringPage from '../pages/FrontendEngineering.vue'
import PerformancePage from '../pages/Performance.vue'
import InterviewPage from '../pages/Interview.vue'
import CareerPage from '../pages/Career.vue'

const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: '/interview' },
  { path: '/javascript', name: 'javascript', component: JavaScriptPage, meta: { title: 'JavaScript' } },
  { path: '/typescript', name: 'typescript', component: TypeScriptPage, meta: { title: 'TypeScript' } },
  { path: '/react', name: 'react', component: ReactPage, meta: { title: 'React' } },
  { path: '/node', name: 'node', component: NodePage, meta: { title: 'Node' } },
  { path: '/Game', name: 'Game', component: GamePage, meta: { title: 'Game' } },
  { path: '/frontend-engineering', name: 'frontend-engineering', component: FrontendEngineeringPage, meta: { title: 'Frontend Engineering' } },
  { path: '/performance', name: 'performance', component: PerformancePage, meta: { title: 'Performance' } },
  { path: '/interview', name: 'interview', component: InterviewPage, meta: { title: 'Interview' } },
  { path: '/career', name: 'career', component: CareerPage, meta: { title: 'Career' } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// Update the document title dynamically based on the route
router.afterEach((to) => {
  const routeTitle = to.meta.title || 'Default Title';  // Fallback to a default title if none is set
  document.title = routeTitle;
})

export default router
